<template>
  <div class="component-basic-enhanced">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">基础组件</h1>
          <p class="page-subtitle">Element Plus 基础组件库完整示例，包含所有常用组件的使用方法和最佳实践</p>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button type="primary" @click="exportComponentExample">
              <el-icon><DocumentCopy /></el-icon>
              复制代码
            </el-button>
            <el-button @click="toggleTheme">
              <el-icon><component :is="isDark ? 'Sunny' : 'Moon'" /></el-icon>
              {{ isDark ? '明亮' : '暗黑' }}
            </el-button>
            <el-button @click="refreshExamples" type="success">
              <el-icon><Refresh /></el-icon>
              刷新示例
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>

    <!-- 组件分类导航 -->
    <div class="component-navigation">
      <el-card>
        <div class="nav-tabs">
          <el-tabs v-model="activeTab" @tab-change="handleTabChange">
            <el-tab-pane label="按钮组件" name="buttons">
              <template #label>
                <span class="nav-label">
                  <el-icon><Mouse /></el-icon>
                  按钮组件
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="表单组件" name="forms">
              <template #label>
                <span class="nav-label">
                  <el-icon><Edit /></el-icon>
                  表单组件
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="展示组件" name="display">
              <template #label>
                <span class="nav-label">
                  <el-icon><Grid /></el-icon>
                  展示组件
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="反馈组件" name="feedback">
              <template #label>
                <span class="nav-label">
                  <el-icon><Bell /></el-icon>
                  反馈组件
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="导航组件" name="navigation">
              <template #label>
                <span class="nav-label">
                  <el-icon><Compass /></el-icon>
                  导航组件
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>

    <!-- 组件示例内容 -->
    <div class="component-content">
      <!-- 按钮组件示例 -->
      <div v-show="activeTab === 'buttons'" class="tab-content">
        <el-card class="demo-card">
          <template #header>
            <h3>按钮 Button</h3>
          </template>
          
          <div class="demo-section">
            <h4>基础按钮</h4>
            <div class="demo-block">
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </div>
          </div>

          <div class="demo-section">
            <h4>朴素按钮</h4>
            <div class="demo-block">
              <el-button plain>朴素按钮</el-button>
              <el-button type="primary" plain>主要按钮</el-button>
              <el-button type="success" plain>成功按钮</el-button>
              <el-button type="info" plain>信息按钮</el-button>
              <el-button type="warning" plain>警告按钮</el-button>
              <el-button type="danger" plain>危险按钮</el-button>
            </div>
          </div>

          <div class="demo-section">
            <h4>圆角按钮</h4>
            <div class="demo-block">
              <el-button round>圆角按钮</el-button>
              <el-button type="primary" round>主要按钮</el-button>
              <el-button type="success" round>成功按钮</el-button>
              <el-button type="info" round>信息按钮</el-button>
              <el-button type="warning" round>警告按钮</el-button>
              <el-button type="danger" round>危险按钮</el-button>
            </div>
          </div>

          <div class="demo-section">
            <h4>图标按钮</h4>
            <div class="demo-block">
              <el-button :icon="Edit" circle />
              <el-button type="primary" :icon="Search" circle />
              <el-button type="success" :icon="Check" circle />
              <el-button type="info" :icon="Message" circle />
              <el-button type="warning" :icon="Star" circle />
              <el-button type="danger" :icon="Delete" circle />
            </div>
          </div>

          <div class="demo-section">
            <h4>按钮组</h4>
            <div class="demo-block">
              <el-button-group>
                <el-button type="primary" :icon="ArrowLeft">上一页</el-button>
                <el-button type="primary">下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
              </el-button-group>
            </div>
          </div>

          <div class="demo-section">
            <h4>加载状态</h4>
            <div class="demo-block">
              <el-button :loading="loading1" type="primary" @click="handleClick1">
                点击加载
              </el-button>
              <el-button :loading="loading2" type="primary" loading-icon="Eleme" @click="handleClick2">
                自定义加载图标
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 表单组件示例 -->
      <div v-show="activeTab === 'forms'" class="tab-content">
        <el-card class="demo-card">
          <template #header>
            <h3>表单组件 Form</h3>
          </template>

          <div class="demo-section">
            <h4>基础输入</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="formData.text1" placeholder="请输入内容" />
                </el-col>
                <el-col :span="8">
                  <el-input v-model="formData.text2" placeholder="请输入内容" clearable />
                </el-col>
                <el-col :span="8">
                  <el-input v-model="formData.text3" placeholder="请输入内容" show-password />
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-section">
            <h4>输入框组合</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="formData.url" placeholder="请输入网址">
                    <template #prepend>Http://</template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="formData.domain" placeholder="请输入">
                    <template #append>.com</template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="formData.search" placeholder="请输入内容">
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-section">
            <h4>选择器</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-select v-model="formData.select1" placeholder="请选择">
                    <el-option label="选项一" value="option1" />
                    <el-option label="选项二" value="option2" />
                    <el-option label="选项三" value="option3" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="formData.select2" multiple placeholder="请选择">
                    <el-option label="选项一" value="option1" />
                    <el-option label="选项二" value="option2" />
                    <el-option label="选项三" value="option3" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-date-picker
                    v-model="formData.date"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-section">
            <h4>开关和滑块</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="demo-item">
                    <span>开关：</span>
                    <el-switch v-model="formData.switch" />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <span>评分：</span>
                    <el-rate v-model="formData.rate" />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="demo-item">
                    <span>滑块：</span>
                    <el-slider v-model="formData.slider" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 展示组件示例 -->
      <div v-show="activeTab === 'display'" class="tab-content">
        <el-card class="demo-card">
          <template #header>
            <h3>展示组件 Display</h3>
          </template>

          <div class="demo-section">
            <h4>标签和徽章</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="demo-item">
                    <span>标签：</span>
                    <el-tag>标签一</el-tag>
                    <el-tag type="success">成功</el-tag>
                    <el-tag type="info">信息</el-tag>
                    <el-tag type="warning">警告</el-tag>
                    <el-tag type="danger">危险</el-tag>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="demo-item">
                    <span>徽章：</span>
                    <el-badge :value="12" class="item">
                      <el-button size="small">评论</el-button>
                    </el-badge>
                    <el-badge :value="3" class="item">
                      <el-button size="small">回复</el-button>
                    </el-badge>
                    <el-badge is-dot class="item">
                      <el-button size="small">新消息</el-button>
                    </el-badge>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="demo-section">
            <h4>进度条</h4>
            <div class="demo-block">
              <el-progress :percentage="50" />
              <el-progress :percentage="100" :format="format" />
              <el-progress :percentage="100" status="success" />
              <el-progress :percentage="100" status="warning" />
              <el-progress :percentage="50" status="exception" />
            </div>
          </div>

          <div class="demo-section">
            <h4>头像</h4>
            <div class="demo-block">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-avatar :size="50" :src="avatarUrl" />
                </el-col>
                <el-col :span="6">
                  <el-avatar :size="50" src="invalid-src">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face" />
                  </el-avatar>
                </el-col>
                <el-col :span="6">
                  <el-avatar :size="50">
                    <el-icon><User /></el-icon>
                  </el-avatar>
                </el-col>
                <el-col :span="6">
                  <el-avatar :size="50" style="background-color: #409eff; color: #fff;">
                    U
                  </el-avatar>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 反馈组件示例 -->
      <div v-show="activeTab === 'feedback'" class="tab-content">
        <el-card class="demo-card">
          <template #header>
            <h3>反馈组件 Feedback</h3>
          </template>

          <div class="demo-section">
            <h4>警告提示</h4>
            <div class="demo-block">
              <el-alert title="成功提示的文案" type="success" />
              <el-alert title="消息提示的文案" type="info" show-icon />
              <el-alert title="警告提示的文案" type="warning" show-icon closable />
              <el-alert title="错误提示的文案" type="error" show-icon closable>
                <template #default>
                  这是一段详细的错误描述信息，可以帮助用户了解错误的具体原因。
                </template>
              </el-alert>
            </div>
          </div>

          <div class="demo-section">
            <h4>消息提示</h4>
            <div class="demo-block">
              <el-button @click="showMessage('success')">成功消息</el-button>
              <el-button @click="showMessage('warning')">警告消息</el-button>
              <el-button @click="showMessage('info')">信息消息</el-button>
              <el-button @click="showMessage('error')">错误消息</el-button>
            </div>
          </div>

          <div class="demo-section">
            <h4>通知</h4>
            <div class="demo-block">
              <el-button @click="showNotification('success')">成功通知</el-button>
              <el-button @click="showNotification('warning')">警告通知</el-button>
              <el-button @click="showNotification('info')">信息通知</el-button>
              <el-button @click="showNotification('error')">错误通知</el-button>
            </div>
          </div>

          <div class="demo-section">
            <h4>确认对话框</h4>
            <div class="demo-block">
              <el-button @click="showConfirm">确认对话框</el-button>
              <el-button @click="showPrompt">输入对话框</el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 导航组件示例 -->
      <div v-show="activeTab === 'navigation'" class="tab-content">
        <el-card class="demo-card">
          <template #header>
            <h3>导航组件 Navigation</h3>
          </template>

          <div class="demo-section">
            <h4>面包屑</h4>
            <div class="demo-block">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>

          <div class="demo-section">
            <h4>下拉菜单</h4>
            <div class="demo-block">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  下拉菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                    <el-dropdown-item command="b">狮子头</el-dropdown-item>
                    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>

          <div class="demo-section">
            <h4>步骤条</h4>
            <div class="demo-block">
              <el-steps :active="activeStep" finish-status="success">
                <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字" />
                <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字" />
                <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字" />
              </el-steps>
              <div style="margin-top: 20px;">
                <el-button @click="prev">上一步</el-button>
                <el-button type="primary" @click="next">下一步</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import {
  DocumentCopy, Sunny, Moon, Refresh, Mouse, Edit, Grid, Bell, Compass,
  Check, Search, Delete, ArrowLeft, ArrowRight, User, ArrowDown
} from '@element-plus/icons-vue'

// 响应式数据
const isDark = ref(false)
const activeTab = ref('buttons')
const loading1 = ref(false)
const loading2 = ref(false)
const activeStep = ref(0)

const formData = reactive({
  text1: '',
  text2: '',
  text3: '',
  url: '',
  domain: '',
  search: '',
  select1: '',
  select2: [],
  date: '',
  switch: true,
  rate: 4,
  slider: 50
})

const avatarUrl = 'https://images.unsplash.com/photo-1494790108755-2616b612b601?w=100&h=100&fit=crop&crop=face'

// 方法
const toggleTheme = () => {
  isDark.value = !isDark.value
  ElMessage.info(`已切换到${isDark.value ? '暗黑' : '明亮'}主题`)
}

const refreshExamples = () => {
  ElMessage.success('示例已刷新')
}

const exportComponentExample = () => {
  const exampleCode = `// Element Plus 基础组件示例
import { ElButton, ElInput, ElSelect, ElDatePicker } from 'element-plus'

// 使用示例
<el-button type="primary">主要按钮</el-button>
<el-input v-model="input" placeholder="请输入内容" />
<el-select v-model="value" placeholder="请选择">
  <el-option label="选项一" value="1" />
</el-select>`
  
  navigator.clipboard.writeText(exampleCode).then(() => {
    ElMessage.success('代码已复制到剪贴板')
  })
}

const handleTabChange = (tab) => {
  console.log('切换到标签:', tab)
}

const handleClick1 = () => {
  loading1.value = true
  setTimeout(() => {
    loading1.value = false
  }, 2000)
}

const handleClick2 = () => {
  loading2.value = true
  setTimeout(() => {
    loading2.value = false
  }, 2000)
}

const format = (percentage) => {
  return percentage === 100 ? '满' : `${percentage}%`
}

const showMessage = (type) => {
  const messages = {
    success: '这是一条成功的提示消息',
    warning: '这是一条警告的提示消息',
    info: '这是一条消息的提示消息',
    error: '这是一条错误的提示消息'
  }
  ElMessage[type](messages[type])
}

const showNotification = (type) => {
  const notifications = {
    success: { title: '成功', message: '这是一条成功的通知消息' },
    warning: { title: '警告', message: '这是一条警告的通知消息' },
    info: { title: '信息', message: '这是一条信息的通知消息' },
    error: { title: '错误', message: '这是一条错误的通知消息' }
  }
  ElNotification[type](notifications[type])
}

const showConfirm = () => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功!')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const showPrompt = () => {
  ElMessageBox.prompt('请输入邮箱', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: '邮箱格式不正确'
  }).then(({ value }) => {
    ElMessage.success('你的邮箱是: ' + value)
  }).catch(() => {
    ElMessage.info('取消输入')
  })
}

const handleCommand = (command) => {
  ElMessage.info(`点击了 ${command}`)
}

const next = () => {
  if (activeStep.value < 2) activeStep.value++
}

const prev = () => {
  if (activeStep.value > 0) activeStep.value--
}
</script>

<style scoped>
.component-basic-enhanced {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.component-navigation {
  margin-bottom: 24px;
}

.nav-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.component-content {
  margin-top: 20px;
}

.demo-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.demo-section {
  margin-bottom: 32px;
}

.demo-section h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.demo-block {
  padding: 20px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #eee;
}

.demo-block .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.demo-block .el-tag {
  margin-right: 10px;
}

.demo-block .el-progress {
  margin-bottom: 20px;
}

.demo-block .el-alert {
  margin-bottom: 20px;
}

.demo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .demo-block .el-button {
    margin-right: 5px;
    margin-bottom: 8px;
  }
}

/* 动画效果 */
.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
